css box-sizing

❓질문

css box-sizing 속성에 대해 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

뭔가 들어본거는 같은데 CSS 요소의 크기를 계산하는 방식에 대한 속성이였던 것 같습니다. 써보지는 못했습니다.

🏫 정리한 내용

box-sizing은 CSS에서 요소의 크기를 어떻게 계산할지를 결정하는 속성입니다.
box-sizing은 2가지 옵션이 있는데 content-box와 border-box입니다.

content-box는 box-sizing 속성의 기본값으로, 적용 시 요소의 width와 height 값이 내용 영역만의 크기를 나타냅니다. 즉, width와 height는 요소의 실제 콘텐츠 크기만을 정의하고, 그 안에 추가되는 padding과 border는 크기에 포함되지 않습니다.

border-box를 적용하면 width와 height 값이 내용 영역, padding, border를 모두 포함하는 크기를 나타냅니다.